<template>
  <div class="main-container">
    <div class="main-header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>友情链接管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="wrap">
      <div class="content">
        <div class="search-container">
          <el-form class="search-form" label-width="90px" label-position="right" inline>
            <el-row>
              <el-form-item label="站点名称" >
                <el-input v-model="siteName"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSearch">查询</el-button>
                <el-button @click="onReset">重置</el-button>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
        <div class="mt-20">
          <!-- <el-button type="primary" @click="onAdd" v-if="mdata.length > 0"><i class="el-icon-plus"></i> 新建</el-button> -->
          <el-button type="primary" @click="onAdd"><i class="el-icon-plus"></i> 新增友情链接</el-button>
          <!--
          <el-button type="danger" @click="onRemove" disabled><i class="el-icon-delete"></i> 批量删除</el-button>
          -->
        </div>
        <div class="mt-20">
          <el-table :data="list" v-loading="loading">
            <el-table-column prop="sort" label="排序" min-width="80" align='center'>
              <template slot-scope="scope">
                <span>{{(scope.row.sort != 0 && (scope.row.sort == '' || scope.row.sort == null)) ? '--' : scope.row.sort}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="siteName" label="站点名称" min-width="130" align='center'>
            </el-table-column>
            <el-table-column prop="url" label="站点地址" min-width="150" align='center'>
            </el-table-column>
            <el-table-column prop="category" label="外链添加位置" min-width="130" align='center'>
              <template slot-scope="scope">
                <span v-if="scope.row.category==1">PC端</span>
                <span v-if="scope.row.category==2">移动端</span>
                <span v-if="scope.row.category==3">全站</span>
              </template>
            </el-table-column>
            <el-table-column prop="contactWay" label="联系方式" min-width="100" align='center'>
            </el-table-column>
            <el-table-column prop="introduce" label="站点介绍" min-width="150" align='center'>
            </el-table-column>
            <el-table-column prop="showFlag" label="是否显示" min-width="150" align='center'>
              <template slot-scope="scope">
                <span>{{scope.row.showFlag == 0  ? "否" : "是"}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120" fixed="right">
              <template slot-scope="scope">
                <el-button type="text" @click="doEdit(scope.row)">修改</el-button>
                <el-button type="dangertext" @click="doDelete(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="mt-10 t-right" v-if="total > 0">
          <el-pagination
            background
            :current-page="currentPage"
            :total="total"
            :page-size="pageSize"
            layout="total, prev, pager, next, jumper"
            @current-change="handleCurrentChange"
            >
          </el-pagination>
        </div>
        </div>
      </div>
    </div>
    <m-edit v-if="editVisible" :visible.sync="editVisible" :data="editData"   @save="editSave"></m-edit>
  </div>
</template>

<script>
import EditModel from './edit'
  export default {
    components: {
      MEdit: EditModel
    },
    data () {
      return {
        form: {},
        data: [],
        loading: false,
        treeData: [],
        currentPage: 1,
        pageSize:10,
        total:this.total,
        defaultProps: {
          children: 'children',
          label: 'courseName'
        },
        editVisible: false,
        editData: {},
        showType: 'all',
        mdata: [],
        list:[],
        siteName:null,//查询的输入值
        sort:''
      }
    },
    activated() {
      this.init()
    },
    mounted() {
      this.init()
    },
    methods: {
      handleCurrentChange(val){
        this.currentPage = val
        this.init()
      },
      init() {
        this.loading = true
        const params = {
          pageSize: 10,
          currentPage: this.currentPage,
          siteName: this.siteName,
        }
        this.$api.blogroll.getAllLinks(params).then(res => {
          if(res.success){
            this.loading = false
            this.mdata = res.data
            this.total=res.data.total
            this.list=res.data.list
            this.sort=Number(res.data.list[0].sort) + 1
            console.log(this.sort)
          }
        }).catch(err=>{
          this.loading = false
        })
      },
      onSearch() {
        // this.name=name
        this.currentPage = 1
        this.init()
      },
      onReset() {
        // this.$refs.form.resetFields()//删除from表单里的数值
        this.siteName=''
        this.currentPage = 1
        this.init()
      },
      onAdd() {
        this.$router.push({
          path:'/link/blogroll/add',
          query:{sort:this.sort}
        })
      },
      // 修改
      doEdit(data) {
        this.editData = data
        this.editVisible = true
      },
      // 删除
      doDelete(id) {
        this.$confirm('删除后不可还原，确认删除吗？', '提示', {
          type: 'warning'
        }).then(() => {
          this.$api.blogroll.delete({id: id}).then(res => {
            if(res.success) {
              this.$message.success('已删除')
              this.currentPage = 1
              this.init()
            }
          })
        })
      },
      editSave(){
        this.editVisible = false
        this.init()
      },
      // editCancle () {
      //   this.editVisible = false
      // }
    }
  }
</script>

<style lang="less">
  .tree-modal{
    width: 500px;
    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
    }
  }
 
</style>
